<template>
    <div>
        <el-dialog
            title="新增交通管制信息"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
            center
        >
            <el-form ref="form" :model="intersectionData" label-width="100px" :rules="rules">
                <el-form-item label="道路名称" prop="roadName">
                    <el-input v-model="intersectionData.roadName" placeholder="请输入道路名称" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item label="管制原因" prop="controlReason">
                    <el-input v-model="intersectionData.controlReason" placeholder="请输入管制原因" maxlength="200" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker v-model="intersectionData.startTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <!-- 结束时间不能早于开始时间 -->
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="intersectionData.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="checkEndTime"></el-date-picker>
                </el-form-item>
                <!-- 取消/新增按钮 -->
                 <div class="dialog-footer">
                    <el-button @click="handleClose()">取消</el-button>
                    <el-button v-loading.lock="loading" style="margin-left: 40px" type="primary" @click="bindSave">新增</el-button>
                 </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import { insertTmTrafficControl } from '@/api/tm-road'

    export default {
        data(){
            return {
                dialogVisible: false,
                loading: false,
                intersectionData: {
                    roadName: '',
                    controlReason: '',
                    startTime: '',
                    endTime: ''
                },
                rules: {
                    roadName: [
                        { required: true, message: '道路名称不能为空', trigger: 'blur' }
                    ],
                    controlReason: [
                        { required: true, message: '管制原因不能为空', trigger: 'blur' }
                    ],
                    startTime: [
                        { required: true, message: '开始时间不能为空', trigger: 'blur' }
                    ],
                    endTime: [
                        { required: true, message: '结束时间不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            open(){
                this.intersectionData = {
                    roadName: '',
                    controlReason: '',
                    startTime: '',
                    endTime: ''
                }
                this.dialogVisible = true
            },
            handleClose(){
                this.dialogVisible = false
            },
            async bindSave(){
                // 非空校验
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.bindSaveRequest()
                    } else {
                        return false
                    }
                })
            },
            async bindSaveRequest(){
                this.loading = true;
                const { code = undefined } = await insertTmTrafficControl({ ...this.intersectionData })
                if (code === 200) {
                    this.$message.success('新增成功')
                    this.$emit('refreshIntersectionData')
                    this.handleClose()
                } else {
                    this.$message.error('新增失败')
                }
                this.loading = false;
            },
            checkEndTime(date){
                if(date < this.intersectionData.startTime){
                    this.$message.error('结束时间不能早于开始时间')
                    this.intersectionData.endTime = ''
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: center;
    margin-top: 20px;
}
</style>